<template>
  <div class="app-container org">
    <!-- 左侧区域 -->
    <el-card v-show="IsShow" class="leftCard" v-if="!gotoShow">
      <isComplete @handleArrowLeft="handleArrowLeft" @getSeqId="getSeqId" />
    </el-card>

    <div
      v-show="!IsShow"
      style="
        width: 4.5%;
        background-color: #fff;
        text-align: center;
        position: relative;
        margin-right: 0.5%;
      "
      v-if="!gotoShow">
      <el-button
        style="height: 40px; position: absolute; bottom: 0; left: 1vw"
        @click="handleExpand()"
        link
      >
        展开<el-icon>
          <DArrowRight />
        </el-icon>
      </el-button>
    </div>

    <!-- 右侧区域 -->
    <el-card :class="gotoShow ? 'rightCard2' : (IsShow ? 'rightCard' : 'rightCard1')">
      <el-tabs v-model="rightActivityName" class="demo-tabs" @tab-change="tabChange">
        <el-tab-pane label="任务流程" name="1" :disabled="!projectId">
          <rwlc v-if="rightActivityName == '1'" ref="rwlcRef" />
        </el-tab-pane>
        <el-tab-pane label="基本信息" name="2" :disabled="!projectId">
          <jbxx v-if="rightActivityName == '2'" ref="jbxxRef" />
        </el-tab-pane>
        <el-tab-pane label="检测内容" name="10" :disabled="!projectId">
          <jcnr v-if="rightActivityName == '10'" ref="jcnrRef" />
        </el-tab-pane>
        <el-tab-pane label="样品详情" name="3" :disabled="!projectId">
          <cyrwd v-if="rightActivityName == '3'" ref="cyrwdRef" />
        </el-tab-pane>
        <el-tab-pane label="现场原始记录" name="4" :disabled="!projectId">
          <xcysjlb v-if="rightActivityName == '4'" ref="ysjlbRef" />
        </el-tab-pane>
        <el-tab-pane label="样品交接" name="5" :disabled="!projectId">
          <ypjj v-if="rightActivityName == '5'" ref="ypjjRef" />
        </el-tab-pane>
        <el-tab-pane label="样品发放" name="6" :disabled="!projectId">
          <yplq v-if="rightActivityName == '6'" ref="yplqRef" />
        </el-tab-pane>
        <el-tab-pane label="分析样品单" name="7" :disabled="!projectId">
          <fxypd v-if="rightActivityName == '7'" ref="fxypdRef" />
        </el-tab-pane>
        <el-tab-pane label="实验室原始记录" name="8" :disabled="!projectId">
          <sysysjl v-if="rightActivityName == '8'" ref="sysysjlRef" />
        </el-tab-pane>
        <el-tab-pane label="报告评审" name="9" :disabled="!projectId">
          <bgps v-if="rightActivityName == '9'" ref="bgpsRef" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup name="TaskProgressDetails">
import isComplete from "./components/isComplete";
import rwlc from "./components/rwlc";
import jbxx from "./components/jbxx";
import jcnr from "./components/jcnr";
import cyrwd from "./components/cyrwd";
import xcysjlb from "./components/xcysjlb.vue";
import ypjj from "./components/ypjj.vue";
import yplq from "./components/yplq.vue";
import fxypd from "./components/fxypd.vue";
import sysysjl from "./components/sysysjl.vue";
import bgps from "./components/bgps.vue";
const router = useRouter();
const route = useRoute();
const rightActivityName = ref("1");
const rwlcRef = ref(null);
const jbxxRef = ref(null);
const cyrwdRef = ref(null);
const ypjjRef = ref(null);
const ysjlbRef = ref(null);
const yplqRef = ref(null);
const fxypdRef = ref(null);
const sysysjlRef = ref(null);
const bgpsRef = ref(null);
const jcnrRef = ref(null);
const gotoShow = ref(false);
const IsShow = ref(true);

const projectId = ref("");

function getSeqId(val,progressType) {
  projectId.value = val;
  if(!progressType) progressType = 1;
  if (rightActivityName.value != progressType) {
    rightActivityName.value = progressType;
  }
  // 执行刷新操作
  tabChange(progressType);
}
watch(
  () => route.query.projectId,
  (val) => {
    if (route.query.projectId) {
      gotoShow.value = true;
      getSeqId(route.query.projectId,route.query.progressType);
    }
  }
);

onMounted(() => {
  nextTick(() => {
    if (route.query.projectId) {
      gotoShow.value = true;
      getSeqId(route.query.projectId,parseProgressType(route.query.progressType));
    }
  });
});

function parseProgressType(progressType){
    if(progressType >= 3 && progressType <= 5){
      progressType = 4;
    }else if(progressType == 6){
      progressType = 5;
    }else if(progressType == 7){
      progressType = 6;
    }else if(progressType == 8){
      progressType = 7;
    }else if(progressType >= 9 && progressType <= 11){
      progressType = 8;
    }else if(progressType >= 12 && progressType <= 13){
      progressType = 9;
    }
    return progressType + "";
}
function handleArrowLeft(params) {
  IsShow.value = false;
}
function handleExpand(params) {
  IsShow.value = true;
}

function tabChange(name) {
  nextTick(() => {
    if (name == "1") {
      rwlcRef.value.getForm(projectId.value);
    } else if (name == "2") {
      jbxxRef.value.getForm(projectId.value);
    } else if (name == "3") {
      cyrwdRef.value.getForm(projectId.value);
    } else if (name == "4") {
      ysjlbRef.value.getForm(projectId.value);
    } else if (name == "5") {
      ypjjRef.value.getForm(projectId.value);
    } else if (name == "6") {
      yplqRef.value.getForm(projectId.value);
    } else if (name == "7") {
      fxypdRef.value.getForm(projectId.value);
    } else if (name == "8") {
      sysysjlRef.value.getForm(projectId.value);
    } else if (name == "9") {
      bgpsRef.value.getForm(projectId.value);
    } else if (name == "10") {
      jcnrRef.value.getForm(projectId.value);
    }
  });
}
</script>

<style scoped>
.rightCard1 {
  width: 95%;
  transition: initial;
}
.rightCard2 {
  width: 100%;
  transition: initial;
}
</style>
